<template>
  <view class="mt-12">
    <view v-if="item" class="pt-12 px-12 mb-12 register-info">
      <view class="disFlxJS fz-14 mb-12">
        <text class="title-color">报名状态：</text>
        <text class="value-color" :style="{ color: getApprovalStatusTextRef?.color }">
          {{ getApprovalStatusTextRef?.text }}
        </text>
      </view>
      <view v-if="item.cancelRecordId" class="disFlxJS fz-14 mb-12">
        <text class="title-color">取消报名记录：</text>
        <TButton
          text="查看详情"
          type="none"
          :customStyle="{
            color: '#333333',
            fontSize: '24rpx',
            marginLeft: '24rpx',
            border: 'solid 1px #C8CACC',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="cancelRegistrationRecordVisible = true"
        />
      </view>
      <view class="disFlxJS fz-14 mb-12">
        <text class="title-color">报名来源：</text>
        <text class="value-color">
          {{ RegisterTypeText[item.registerType] }}
        </text>
      </view>
      <view class="disFlxJS fz-14 mb-12">
        <text class="title-color">审核时间：</text>
        <text class="value-color">{{ item.verifyTime || '--' }}</text>
      </view>
      <view v-if="item.verifyName" class="disFlxJS fz-14 mb-12">
        <text class="title-color">审核人：</text>
        <text class="value-color">
          <text>{{ item.verifyName || '-' }}</text>
        </text>
      </view>
      <view v-if="item.approvalStatus === ApprovalStatusEnum.REJECT" class="disFlxJS fz-14 mb-12">
        <text class="title-color flex-shrink-0">驳回原因：</text>
        <text class="value-color">
          {{ remarks || '--' }}
        </text>
      </view>
    </view>
    <view class="br-8 ticket-info pa-16">
      <view class="disFlxJS" style="align-items: flex-start">
        <!-- 左边 -->
        <view class="flex-1">
          <view class="mb-8 disFlxAC">
            <text class="label-color fz-18 flex-shrink-0">
              {{ personName }}
            </text>
            <text
              v-if="ticketName"
              class="ticket-tag br-2 px-8 py-2 fz-12 ml-8 ov-1"
              style="max-width: 400rpx"
            >
              {{ ticketName }}
            </text>
          </view>
          <view class="gray-color fz-14">
            <text>{{ personTel }}</text>
          </view>
          <view v-if="arrangeVoList.length" class="mt-16" @click="toSeatArrangementList">
            <template v-for="(v, i) in arrangeVoList" :key="i">
              <view
                class="px-6 py-2 fz-10 label-color br-2 mb-8"
                style="background-color: #f2f3f5; width: fit-content"
              >
                <text>{{ v.name }}</text>
                <text class="ml-8">{{ v.displayName }}</text>
              </view>
            </template>
            <view
              v-if="item?.arrangeVoList && item.arrangeVoList.length > arrangeVoList.length"
              class="gray-color fz-12 disFlxAC"
            >
              <text>全部安排</text>
              <text class="ali-icon ml-4">&#xe67e;</text>
            </view>
          </view>
        </view>
        <!-- 右边 -->
        <view class="disFlxCC">
          <view class="consumeNo-url">
            <TImage
              v-if="
                item?.approvalStatus === ApprovalStatusEnum.CANCEL ||
                item?.approvalStatus === ApprovalStatusEnum.CANCELING ||
                item?.approvalStatus === ApprovalStatusEnum.REJECT
              "
              class="status-view"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/canceled-icon.png"
              width="100%"
              height="100%"
            />
            <TImage
              v-else-if="item?.signStatus === SignStatusEnum.YES_SIGN"
              class="status-view"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/signed-icon.png"
              width="100%"
              height="100%"
            />
            <TImage
              v-if="item?.consumeNoUrl"
              :src="item.consumeNoUrl"
              width="100%"
              height="100%"
              preview
            />
            <view
              v-else
              class="disFlxAC disFlxJC"
              style="color: #2878ff; height: 100%; background-color: #dcdee0"
              @click="emits('refresh')"
            >
              <text class="ali-icon mr-4 fz-14">&#xe6a1;</text>
              <text class="fz-12">刷新</text>
            </view>
          </view>
          <view class="fz-12 fw-7 mt-8">
            <text user-select>{{ item?.consumeNo }}</text>
          </view>
        </view>
      </view>

      <view class="my-16 h-1" style="background-color: #ebedf0"></view>
      <view class="disFlxAC flexEnd">
        <TButton
          v-if="getShowCancelRegister"
          text="取消报名"
          type="none"
          :icon="'\ue604'"
          :customStyle="{
            display: 'inline-block',
            backgroundColor: '#F2F3F5',
            color: '#333333',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="modalVisible = true"
        />
        <TButton
          text="详细信息"
          type="none"
          :icon="'\ue8bf'"
          :customStyle="{
            display: 'inline-block',
            backgroundColor: '#F2F3F5',
            color: '#333333',
            marginLeft: '24rpx',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="toRegisterFormForm"
        />
        <TButton
          v-if="registerItem?.consumeNo && registerItem.consumeNoUrl"
          text="分享凭证"
          type="none"
          :icon="'\ue6b9'"
          :customStyle="{
            display: 'inline-block',
            backgroundColor: '#F2F3F5',
            color: '#333333',
            marginLeft: '24rpx',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="emits('showVoucher')"
        />
      </view>
    </view>
  </view>

  <CancelRegistrationRecord
    v-if="item?.cancelRecordId"
    v-model:visible="cancelRegistrationRecordVisible"
    :register-id="item?.id"
    type="user"
  />

  <ShowModal
    v-model="modalVisible"
    title="取消报名"
    content-width="100%"
    cancel-text="暂不取消"
    confirm-text="申请取消"
    confirm-color="#EA5E0E"
    :confirm-auto-close="false"
    @confirm="handleCancelRegister"
  >
    <template #content>
      <view class="pa-20" style="width: 100%">
        <view class="fz-14 mb-16" style="color: #969799">
          <text>活动主办方审核同意取消后，如有支付的活动费用将原路退回。</text>
        </view>
        <view style="background-color: #f2f3f5">
          <UniEasyinput v-model="cancelRemark" type="textarea" placeholder="请说明取消报名原因" />
        </view>
      </view>
    </template>
  </ShowModal>
</template>

<script setup lang="ts">
  import type { ActivityRegisterTicketUnion } from '@/api/order/types';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TImage from '@/components/TImage/index.vue';
  import {
    ActivityStatusEnum,
    ApprovalStatusEnum,
    SignStatusEnum,
    TicketTypeEnum,
  } from '@/enums/activityStatusEnum';
  import { propTypes } from '@/utils/propTypes';
  import { computed, ref, type PropType } from 'vue';
  import { RegisterTypeText, getApprovalStatusText } from '@/api/activity/types';
  import { navigateTo } from '@/router';
  import { activityRegisterOrderCancelRegister } from '@/api/activity';
  import { Toast } from '@/utils';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import CancelRegistrationRecord from '../../components/CancelRegistrationRecord.vue';

  const props = defineProps({
    id: propTypes.number,
    registerItem: Object as PropType<ActivityRegisterTicketUnion>,
    personName: propTypes.string,
    personTel: propTypes.string,
    ticketName: propTypes.string,
    activityStatus: Number as PropType<ActivityStatusEnum>,
    remarks: propTypes.string,
  });

  const item = ref<ActivityRegisterTicketUnion | null>(props.registerItem || null);
  const cancelRegistrationRecordVisible = ref(false);

  const getApprovalStatusTextRef = computed(() => {
    if (item.value) {
      return getApprovalStatusText.get(item.value?.approvalStatus);
    }

    return void 0;
  });

  const emits = defineEmits(['refresh', 'showVoucher']);

  const arrangeVoList = computed(() => {
    const list = item.value?.arrangeVoList || [];
    return list.slice(0, 2);
  });

  const getShowCancelRegister = computed(() => {
    return (
      (item.value?.approvalStatus === ApprovalStatusEnum.PASSED ||
        item.value?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) &&
      props.activityStatus !== ActivityStatusEnum.END &&
      props.activityStatus !== ActivityStatusEnum.CANCEL &&
      item.value?.signStatus !== SignStatusEnum.YES_SIGN
    );
  });

  const modalVisible = ref(false);
  const cancelRemark = ref<string>('');
  /** 取消报名 */
  function handleCancelRegister() {
    if (!cancelRemark.value) return Toast('请说明取消报名原因');
    activityRegisterOrderCancelRegister({
      registerId: item.value?.id as number,
      remarks: cancelRemark.value,
    })
      .then(() => {
        if (item.value) {
          item.value.approvalStatus =
            item.value.ticketType === TicketTypeEnum.FREE
              ? ApprovalStatusEnum.CANCEL
              : ApprovalStatusEnum.CANCELING;
        }
        Toast('申请已提交');
      })
      .finally(() => (modalVisible.value = false));
  }

  /** 跳转排座信息列表 */
  function toSeatArrangementList() {
    navigateTo({
      name: 'activityScheduling',
      options: {
        sceneType: 'order',
        activityRegisterId: item.value?.id,
      },
    });
  }

  /** 跳转报名表单详情 */
  function toRegisterFormForm() {
    navigateTo({
      name: 'activityRegisterForm',
      options: {
        id: props.id as number,
        type: 'order',
      },
    });
  }
</script>

<style lang="scss" scoped>
  .label-color {
    color: #333;
  }

  .value-color {
    color: #666664;
  }

  .gray-color {
    color: #969799;
  }

  .register-info {
    background-color: #fff4e7;
    border: 1px solid transparent;
  }

  .ticket-info {
    border: 1px solid #ebedf0;
    .ticket-tag {
      background-color: #d0f7ff;
      color: #2878ff;
    }
  }

  .consumeNo-url {
    width: 144rpx;
    height: 144rpx;
    position: relative;
    .status-view {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
  }
</style>
